<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>盒子模型</title>
		<style type="text/css">
			.outher{
				width:1600px;
				height: 600px;
				border: 1px solid #999;
				margin: 0 auto;/*margin是居中*/				
			}
			.top{
				height: 200px;
				width: 100%;
				background: #cc3;
				font: 40px "微软雅黑";
				text-align:center;
				line-height:200px;
			}
			.content{
				width:100%;
				height:600px;
				background:#eee;
				
			}
			.footer{
				width:100px;
				height:100%;
				background:#660;
				font: 40px "微软雅黑";
				text-align:center;
				line-height:100px;
				padding: 30px;
			}
			.left{
				width:598px;
				height:100%;/*指content父元素的百分之百*/
				background:#fc3;
				display: inline-block;
			}
			.right{
				width:997px;
				height:594%;
				background:#ffc;
				display: inline-block;	
				text-align:center;
				line-height: 594px;		
			}
			.inner{
				width:100px;
				height:100px;
				border: 1px solid red;
				margin-top: 250px;
				margin-left: 250px;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="top">loge</div>
			<div class="content">
			<div class="left">left</div>
			<div class="right">
				<div class="inner"></div>
			</div>
			</div>
			<div class="footer">copyright QTC</div>
		</div>
	</body>
</html>
